{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" type="text/css" href="/static/index/css/kline.css"/>
<style>
</style>
{/block}
{block name="content"}
<!--主体-->
<header class="wy-header">
  <div class="header">
    <a href="javascript:void(0);" class="back-btn">
      <i class="fa fa-angle-left" style="font-size: 24px;"></i>
    </a>
    <h1 class="header-title">{$marketInfo["code"]|strtoupper}/USDT</h1>
  </div>
</header>
<div class="ticker">
  <div class="small">
    <!-- 左侧区域：垂直上下结构 -->
    <div class="small-left">
      <!-- 上层：币种信息 -->
      <div class="symbol-section">
        <div class="symbol-name is-not-etp">
          <p>
            <em>BTC/USDT</em>
            <em stop="1" data-type="small" class="expand-icon"></em>
          </p>
          <i class="dropdown icon-arrow-down-blue"></i>
        </div>
      </div>

      <!-- 下层：金额与涨跌幅水平排列 -->
      <div class="price-change-container">
        <p class="price amount color-down">
          <span effect="light" class="amount-ex-item__title has-tip">
            <span class="el-popover__reference-wrapper">
              <span class="el-popover__reference now-price">95477.87</span>
            </span>
          </span>
        </p>
        <p class="price change color-down">
          <em>-0.80%</em>
        </p>
      </div>
    </div>

    <!-- 右侧区域：保持垂直排列 -->
    <div class="small-right">
      <div class="high-low-group">
        <dl class="high">
          <dt>24h高</dt>
          <dd class="high-price-24">96814.82</dd>
        </dl>
        <dl class="low">
          <dt>24h低</dt>
          <dd class="low-price-24">94843.70</dd>
        </dl>
      </div>
      <div class="volume-group">
        <dl class="amount">
          <dt>24H量(BTC)</dt>
          <dd class="amount-24">1,438</dd>
        </dl>
        <dl class="vol">
          <dt>24h额(USDT)</dt>
          <dd class="vol-24">138,090,755</dd>
        </dl>
      </div>
    </div>
  </div>
</div>
<div>
  <ul class="comm-tabs">
    <li><a href="javascript:void(0);" onclick="tab(this,0)" data="1min">分时</a></li>
    <li  class="active"><a href="javascript:void(0);" onclick="tab(this,1)" data="1day">日K</a></li>
    <li><a href="javascript:void(0);" onclick="tab(this,2)" data="1week">周K</a></li>
    <li><a href="javascript:void(0);" onclick="tab(this,3)" data="1mon">月K</a></li>
    <li><a href="javascript:void(0);" onclick="tab(this,4)"data="1year">年K</a></li>
    <li><a href="javascript:void(0);" onclick="toggleSelector(this)">
      <div class="selector">分钟</div>
      <ul class="selector-items">
        <li class="" onclick="tab(this,5)" data="1min">1分钟</li>
        <li class="" onclick="tab(this,6)" data="5min">5分钟</li>
        <li class="" onclick="tab(this,7)" data="15min">15分钟</li>
        <li class="" onclick="tab(this,8)" data="30min">30分钟</li>
        <li class="" onclick="tab(this,9)" data="60min">60分钟</li>
      </ul>
    </a>
    </li>
  </ul>
</div>
<div class="charts-border">
  <div id="main" class="charts"></div>
</div>
<div style="height:40px"></div>
<div class="follow-dialog" id="followDialog">
  <div class="dialog-header">
    <h2 class="dialog-title">智能跟单</h2>
    <div class="dialog-close" id="closeDialog">×</div>
  </div>

  <div class="dialog-content">
    <!-- 时间选择 -->
    <h3 class="weui-cells__title">选择跟单时间</h3>
    <div class="time-selector">
      {foreach name="billList" item="vo"}
      <div class="time-item" data-time="{$vo.buy_time}">
        <div class="time">{$vo.buy_time}</div>
        <div class="profit">{$vo.profit_percent}%</div>
      </div>
      {/foreach}
    </div>

    <!-- 优化后的弹出层 -->
    <div class="popup-container">
      <!-- 金额输入区域 - 金额选项在输入框上方 -->
      <div class="amount-input-container">
        <!-- 新增买涨买跌选择 -->
        <div class="direction-selector">
          <button class="direction-btn buy active" data-direction="buy" onclick="rise(1,this)">买涨</button>
          <button class="direction-btn sell" data-direction="sell" onclick="rise(0,this)">买跌</button>
        </div>

        <!-- 金额选项放在输入框上方 -->
        <div class="quick-amounts">
          <button class="quick-amount-btn" data-amount="50">50</button>
          <button class="quick-amount-btn" data-amount="100">100</button>
          <button class="quick-amount-btn" data-amount="200">200</button>
          <button class="quick-amount-btn" data-amount="500">500</button>
          <button class="quick-amount-btn" data-amount="1000">1000</button>
          <button class="quick-amount-btn" data-amount="2000">2000</button>
          <button class="quick-amount-btn" data-amount="5000">5000</button>
          <button class="quick-amount-btn" data-amount="10000">10000</button>
        </div>

        <div class="amount-input-row">
          <div class="amount-input-wrapper">
            <input type="number" class="amount-input" id="tzmoney" placeholder="金额" min="0">
            <!-- 静态单位改为下拉选择框 -->
            {notempty name="payList"}
            <select class="amount-unit-select" onChange="changeWallet(this)">
              {foreach name="payList" item="vo"}
              <option value="{$vo.coin_id}">{$vo.coin.coin_name}</option>
               {/foreach}
            </select>
           {else /}
            <a id="rechargeBtn" href="/pay.html">
              去充值
            </a>
          {/notempty}
          </div>
        </div>
      </div>

      <!-- 账户信息 -->
      <h3 class="account-info-title">账户信息</h3>
      <div class="account-info-grid">
        <div class="account-info-item">
          <div class="account-info-label">账户余额</div>
          <div class="account-info-value profit-rate account">0 USDT</div>
        </div>

        <div class="account-info-item">
          <div class="account-info-label">交易对</div>
          <div class="account-info-value">{$marketInfo["code"]|strtoupper}/USDT</div>
        </div>

        <div class="account-info-item">
          <div class="account-info-label">现价</div>
          <div class="account-info-value profit-rate"><span class="now-price">0</span>USDT</div> <!-- 补充单位 -->
        </div>

        <div class="account-info-item">
          <div class="account-info-label">金额</div>
          <div class="account-info-value profit-rate" id="expectedProfit">0.00 USDT</div>
        </div>
      </div>

      <div class="confirm-btn-container">
        <a href="javascript:;" class="weui-btn weui-btn_primary" id="confirmBtn">确认跟单</a>
      </div>
    </div>
  </div>
</div>
<div class="btns">
  <a href="/trade-list.html" class="btn btn-green">合约记录</a>
  <div onclick="buy()" class="btn btn-red">智能跟单</div>
</div>

<div class="weui-mask" id="mask"></div>
{/block}
{block name="script"}
<script type="text/javascript" src="/static/index/js/klinecharts.min.js"></script>
<script type="text/javascript" src="/static/index/js/kline.js"></script>
<script type="text/javascript">
  const history_url = "/kline-history";
  const polling_url = "/kline-polling";
  const wallet_url ="/wallet";
  let wallet_amount = 0;
  const code = "{$marketInfo['code']}";
  let market_id = "{$marketInfo['id']}"
  let coin_id = 0;
  let amount = 0;
  let is_rise = 1;
  let historyData = [];
  const red = '#F92855';
  const green = '#2DC08E';
  const alphaRed = 'rgba(249, 40, 85, .7)';
  const alphaGreen = 'rgba(45, 192, 142, .7)';
  const theme = "light";
  let currentData = {};
  let interval = "1min";
  let kline ="";
  let type ="candle_solid";
  const style = {
    candle: {
      bar: {
        upColor: green,
        downColor: red,
        upBorderColor: green,
        downBorderColor: red,
        upWickColor: green,
        downWickColor: red
      },
      priceMark: {
        last: {
          upColor: green,
          downColor: red
        }
      }
    },
    indicator: {
      ohlc: {
        upColor: alphaGreen,
        downColor: alphaRed
      },
      bars: [{
        style: 'fill',
        borderStyle: 'solid',
        borderSize: 1,
        borderDashedValue: [2, 2],
        upColor: alphaGreen,
        downColor: alphaRed,
        noChangeColor: '#888888'
      }],
      circles: [{
        style: 'fill',
        borderStyle: 'solid',
        borderSize: 1,
        borderDashedValue: [2, 2],
        upColor: alphaGreen,
        downColor: alphaRed,
        noChangeColor: '#888888'
      }]
    }
  };

  kline = new Kline({
    elem: "main",
    getHistory: function () {
      $.ajax({
        url: history_url,
        type: "POST",
        data: {interval: interval, symbol: code},
        async: false,
        success: function (response) {
          if (response.code != 0) {
            $.msg.error(response.msg);
            return;
          }
          historyData=[];
          response.data.forEach(item => {
            historyData.unshift({
              timestamp: item.id * 1000, // 时间
              open: item.open, // 开
              high: item.high, // 高
              low: item.low, // 低
              close: item.close, // 收
              volume: item.vol // 交易量
            })
          })
        }
      }, "json")
    },
    getCurrentData: function () {
      $.ajax({
        url: polling_url,
        type: "POST",
        data: {symbol: code},
        async: false, // 将 async 设置为 false 以使请求同步
        success: function (response) {
          if (response.code != 0) {
            $.msg.error(response.msg);
            return;
          }
          const res = response.data;
          currentData = {
            open: res.open, // 开盘价，必要字段
            close: res.close, // 收盘价，必要字段
            high: res.high, // 最高价，必要字段
            low: res.low, // 最低价，必要字段
            volume: res.vol, // 成交量，非必须字段
            timestamp: (res.id) * 1000 // 时间戳，毫秒级别，必要字段
          };
          if (res.change>0) {
            $(".change").text("+"+res.change+"%");
            $(".change").css("color",green);
          } else {
            $(".change").text(res.change+"%");
            $(".change").css("color",red);
          }
          $(".now-price").text(res.close);
          $(".high-price-24").text(res.high_24);
          $(".low-price-24").text(res.low_24);
          $(".amount-24").text(res.amount_24);
          $(".vol-24").text(res.vol_24);
        }
      }, "json")
    }
  })
  kline.registerStyles("green_rise_red_fall",style);
  $(".comm-tabs>li:eq(1)").find("a").click();
</script>
<script type="text/javascript" src="/static/index/js/order.js"></script>
{/block}